<!-- 首页 -->
<template>
    <div class="sys-home">
        <el-card>
            <div class="sys-home-top">
                <img :src="userStore.avatar" alt="">
                <div class="card-right">
                    <div>{{ getTime() }}好 {{ userStore.username }}</div>
                    <p>{{ setting.title }}</p>
                </div>
            </div>
        </el-card>
        <!-- 公告信息展示 -->
        <el-card style="margin-top: 12px;max-height:450px;overflow:auto;" class="hide-scrollbar">
            <Notice :activities="noticeArr"></Notice>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import Notice from './notice/index.vue'
import useUserStore from '../../store/modules/user'
import '../../setting'
import setting from '../../setting';
import { getTime } from '../../utils/time'
import { onMounted, reactive } from 'vue';
import { reqGetNoticeInfo } from '../../api/info/notice';
import { AllNotice, getNoticeInfoResponseData, noticeFormData } from '../../api/info/notice/type';
let userStore = useUserStore()
let data = reactive<noticeFormData>({
    pageSize: 10000,
    currentPage: 1
})
let noticeArr = reactive<AllNotice>([])
onMounted(() => {
    getNoticeInfo(data)
})
const getNoticeInfo = async (data: noticeFormData) => {
    let result: getNoticeInfoResponseData = await reqGetNoticeInfo(data)
    if (result.code = 20000) {
        Object.assign(noticeArr, result.data.list)
    }
}
</script>

<style lang="scss" scoped>
.sys-home {
    width: 100%;
    height: 100%;

    .sys-home-top {
        display: flex;
        align-items: center;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .card-right {
            margin-left: 20px;

            div {
                font-weight: 600;
            }

            p {
                font-size: 14px;
                color: #bdbbbb;
                padding-top: 30px;
                font-style: italic;

            }
        }
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
        /* 针对Webkit浏览器 */
    }

    .hide-scrollbar {
        -ms-overflow-style: none;
        /* 针对IE、Edge浏览器 */
        scrollbar-width: none;
        /* 针对Firefox浏览器 */
    }
}</style>